<template>
	<div>
		<h1>百度地图</h1>
		<input type="text" v-model.lazy="keyword" >
		<div id="map" ref="map"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				map: null,
				point: null,
				marker: null,
				keyword:"",
				local:null,
			}

		},
		mounted() {
			// 为什么第三方api需要加window
			// echarts 还是BMapGL都是挂载到window上面的
			// 如果直接使用在当前的组件里面没有导入这个BMapGL 会报错？（效果也会出来，js会向上查找到）
			// 基本上第三方组件，都需要在 mounted组件渲染完毕后再执行初始化（确保js已经加载完毕）
			this.map = new window.BMapGL.Map(this.$refs.map);
			this.point = new window.BMapGL.Point(113.665, 34.784);
			this.map.centerAndZoom(this.point, 15);
			// 鼠标滚轮缩放
			this.map.enableScrollWheelZoom(true);
			// 添加一个点
			this.marker = new window.BMapGL.Marker(this.point);
			// 添加覆盖物
			this.map.addOverlay(this.marker);
			this.local = new window.BMapGL.LocalSearch(this.map, {
					renderOptions:{map: this.map}
				});
		},
		watch:{
			keyword:{
				handler(){
					if(this.keyword===""){
						// 如果为空就清除搜索
						this.local.clearResults()
						// 缩放到中心点
						this.map.centerAndZoom(this.point, 15);
					}else{
						this.local.search(this.keyword)
					}
					
				}
			}
		}
	}
</script>

<style>
	#map {
		width: 100%;
		height: 70vh;
	}
</style>
